import { FormValus } from './my.d'


// 这个文件 是 获取网络请求服务的.. 在 model.js effects里面的call可以跳过来


// http://public-api-v1.aspirantzhang.com/ B站视频老师的个人域名 这里面有他开源的Api接口地址 

const baseURL = "/api" // 我自己抽的一个基准地址 项目中可以单独抽取一个ts文件
// 因为我前端配置了跨域的问题 http请求是可以通过 本地地址+/api+/后端路由的 所以现在使用的是/api  可以在全局下的.umirc.ts查看
// http -> https://umijs.org/zh-CN/plugins/plugin-request
// umi 内置封装了一个http请求的函数 在umi官网搜request便可以搜到上面的地址
// 所以这里可以直接不用axios 用内置的会更好
// import { request } from 'umi' // ! git用法文档(可以变成中文) https://github.com/umijs/umi-request 别用他的Example 往下翻有个umi-request API
import request, { extend } from 'umi-request'; // 是上面那个的升级写法 在git上面搜索Error handling 可以侦听http status
// import { useRequest } from 'umi'; 是一个比request更加强大的http方法 后面自己研究

import { message } from 'antd';

// ! 这里是侦听http status的方法
const errorHandler = function (error: any) {
  const codeMap: any = {
    '021': 'An error has occurred',
    '022': 'It’s a big mistake,',
    // ....
  };
  if (error.response) { // 响应嘛 看看后端有没有响应
    // The request was made and the server responded with a status code
    // that falls out of the range of 2xx
    console.log(error.response.status); // ? code
    console.log(error.response.headers); // ? 头部
    console.log(error.data); // ? 响应body数据
    console.log(error.request); // ? 这里面有请求的网址等..
    console.log(codeMap[error.data.status]); // ? 输出的是一个undefined

    if (error.response.status > 400) {
      // message.warning(error.data + '请求失败,code>400');
      // 因为 error.data 有时候会返回 Random Error Response.导致页面炸掉 这是一个路由代理导致的原因吧..所以下面判断 不能直接提示error.data
      message.warning(error.data.message ? error.data.message : error.data);
    }
  } else {
    // The request was made but no response was received or error occurs when setting up the request.
    console.log(error.message); // ! 这里是请求已经发送了 但是没有回复的时候
    message.error('后端没有返回数据');

  }
  // !  throw error 这里是一个控制台的报错提示 可以不要掉
  // throw error; // If throw. The error will continue to be thrown.

  // return {some: 'data'}; If return, return the value as a return. If you don't write it is equivalent to return undefined, you can judge whether the response has a value when processing the result.
  // return {some: 'data'};
};

// 1. Unified processing
const extendRequest = extend({ errorHandler }); // ? 这里使用第一种方法 感觉比后面2种会难一点...
// // 2. Separate special treatment
// // If unified processing is configured, but an api needs special handling. When requested, the errorHandler is passed as a parameter.
// request('/api/v1/xxx', { errorHandler });

// // 3. not configure errorHandler, the response will be directly treated as promise, and it will be caught.
// request('/api/v1/xxx')
//   .then(function(response) {
//     console.log(response);
//   })
//   .catch(function(error) {
//     return errorHandler(error);
//   });




// 异步的函数
export const getRemoteList2 = async ({ page, per_page }: { page: number, per_page: number }) => { //这里需要export导出 
  // request 项目中要自己在封装一层
  // return request(baseURL + '/users', { // 这其实是代理服务器 会引起跨域问题 一般后端来 但前端也可以解决
  return extendRequest(baseURL + '/users', { // ! 升级成侦听https status的方式... 这样如果失败的话 会跳槽 errorHandler
    // 去到umiJS 官网 搜索 proxy 配置代理能力 https://umijs.org/zh-CN/config#proxy
    // 这里配置到     去全局配置下可以查看一个关于跨域解决的配置    
    method: 'get',
    params: { page, per_page }
  })
    .then(function (response) {
      //   console.log(response.data); //后端返回的数据咯
      return response;
    })
    .catch(function (error) {
      console.log(error);
      return false
    });
}

export const editRecord = async (id: number, params: FormValus) => {
  console.log('id: ', id);
  return extendRequest(baseURL + `/users/${id}`, {
    method: 'put', //put 和 post 是一样的 data传参写法
    data: params
  }).then(res => {
    message.success('This is a success message');
    console.log('edit: ', res);//这里没数据是后端的原因 他是利用http状态去断定
    return true
  }).catch(err => {
    console.log('err: ', err);
    return false
  })
}

export const addRecord = async (params: FormValus) => {
  return extendRequest(baseURL + `/users`, {
    method: 'post', //put 和 post 是一样的 data传参写法
    data: params
  }).then(res => {
    message.success('This is a success message');
    console.log('add: ', res);//这里没数据是后端的原因 他是利用http状态去断定
    return true
  }).catch(err => {
    console.log('err: ', err);
    return false
  })
}

export const delRecord = async (id: number) => {
  console.log('id: ', id);
  return extendRequest(baseURL + `/users/${id}`, {
    method: 'DELETE',
  }).then(res => {
    message.success('This is a success message');
    console.log('del: ', res);//这里没数据是后端的原因 他是利用http状态去断定
    return true
  }).catch(err => {
    console.log('err: ', err);
    return false
  })
}

// ? 这里先不用死数据了 注释掉
// const data = [
//     {
//       key: '1',
//       name: 'John Brown',
//       age: 32,
//       address: 'New York No. 1 Lake Park',
//       tags: ['nice', 'developer'],
//     },
//     {
//        key: '2',
//        name: 'Jim Green',
//        age: 42,
//        address: 'London No. 1 Lake Park',
//        tags: ['loser'],
//      },
//      {
//        key: '3',
//        name: 'Joe Black',
//        age: 32,
//        address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     },
//   ];